<script setup>
import { reactive, toRefs, watch } from "vue";

import { Calculator } from "yoke_tools";
import dayjs from "dayjs";
const state = reactive({
  // 零售价
  price: undefined,
  // 模式
  model: 0,
  // 期数
  periods: 0,
  // 首付金额
  payment: undefined,
  // 租金
  periods1: 0,
  // 列表
  list: [],
  // 首付列表
  periodsList2: [],
  // 方案
  plan: 0,
});

watch(
  () => {
    return reactive({
      price: state.price,
      plan: state.plan,
      periods1: state.periods1,
      model: state.model,
      payment: state.payment,
      periods: state.periods,
    });
  },
  (newState, pervState) => {
    console.log(newState, pervState, "........");
    rent1(newState, false);
  }
);

const typeOptions = [
  {
    label: "标准方案",
    value: 3,
  },
  {
    label: "普惠方案",
    value: 2,
  },
  {
    label: "超惠方案",
    value: 1,
  },
];

const options = [
  {
    label: "月租模式",
    value: 1,
  },
  {
    label: "首付模式",
    value: 2,
  },
];

const periodsObj = {
  12: [3, 4, 5],
  9: [3, 4],
  6: [2],
};

watch(
  () => state.periods,
  (val) => {
    let periodsList2 = periodsObj[val]?.map((el, index) => ({
      label: el + "期",
      value: el,
    }));

    state.periodsList2 = periodsList2;
    state.periods1 = 0;
    state.list = [];
  }
);

// 月租模式
const periodsList = [6, 9, 12]?.map((el, index) => ({
  label: el + "期",
  value: el,
}));

// 首付模式
const periodsList1 = [4, 5, 6, 9, 12]?.map((el, index) => ({
  label: el + "期",
  value: el,
}));

// 低息
const coefficients = [
  {
    key: 12,
    key1: 3,
    value: 8.922,
  },
  {
    key: 12,
    key1: 4,
    value: 9.404,
  },
  {
    key: 12,
    key1: 5,
    value: 9.86,
  },
  {
    key: 9,
    key1: 3,
    value: 7.286,
  },
  {
    key: 9,
    key1: 4,
    value: 7.677,
  },
  {
    key: 6,
    key1: 2,
    value: 5.03,
  },
];
// 超惠
const coefficients1 = [
  {
    key: 12,
    key1: 3,
    value: 9.081,
  },
  {
    key: 12,
    key1: 4,
    value: 9.556,
  },
  {
    key: 12,
    key1: 5,
    value: 10.0,
  },
  {
    key: 9,
    key1: 3,
    value: 7.412,
  },
  {
    key: 9,
    key1: 4,
    value: 7.788,
  },
  {
    key: 6,
    key1: 2,
    value: 5.125,
  },
];
// 标准
const coefficients3 = [
  {
    key: 12,
    key1: 3,
    value: 8.626,
  },
  {
    key: 12,
    key1: 4,
    value: 9.128,
  },
  {
    key: 12,
    key1: 5,
    value: 9.606,
  },
  {
    key: 9,
    key1: 3,
    value: 7.055,
  },
  {
    key: 9,
    key1: 4,
    value: 7.472,
  },
  {
    key: 6,
    key1: 2,
    value: 4.857,
  },
];
// [
//   {
//     key: 12,
//     key1: 3,
//     value: 8.92,
//   },
//   {
//     key: 12,
//     key1: 4,
//     value: 9.4,
//   },
//   {
//     key: 12,
//     key1: 5,
//     value: 9.85,
//   },
//   {
//     key: 9,
//     key1: 3,
//     value: 7.28,
//   },
//   {
//     key: 9,
//     key1: 4,
//     value: 7.67,
//   },
//   {
//     key: 6,
//     key1: 2,
//     value: 5.03,
//   },
// ]

const { price, model, periods, payment, periods1, periodsList2, plan } = toRefs(state);
document.title = "租金计算器";

const rent1 = (nextState, flag) => {
  const state1 = nextState || state;
  console.log(nextState, state1);
  if (flag) {
    if (!state1.plan) return alert("请选择租赁模式");
    if (!state1.model) return alert("请选择租赁方式");
    if (!state1.periods) return alert("请选择租赁期数");
    if (!state1.price) return alert("请输入设备零售价");

    // 超惠方案
    if (state.plan === 1) {
      // 月租模式
      if (state1.model === 1) {
        if (!state1.periods1) return alert("请选择首付期数");
        const coefficientsFind = coefficients1.find(
          (el) => el.key === state1.periods && el.key1 === state1.periods1
        )?.value;

        // 最终公式：售价 / 系数
        const num = new Calculator().divide(state1.price, coefficientsFind).getResult();

        const rent = num;

        // 首付
        // const payment = new Calculator().multiply(rent * 1, state1.periods1).getResult();

        const list = [...Array(state1.periods).keys()].map((el, index) => {
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }

      // 首付模式
      if (state1.model === 2) {
        if (!state1.payment) return alert("请输入首付金额");
        // 计算租金new
        const num = new Calculator().subtract(state1.price, state1.payment).getResult(); // 售价 - 首付
        const num1 = new Calculator().multiply(0.04, state1.periods).getResult(); // 0.04 * 期数
        const num2 = new Calculator().add(1.08).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
        const num3 = new Calculator().subtract(state1.periods, 1).getResult(); // 期数 - 1
        const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        console.log(rent);
        const list = [...Array(state1.periods).keys()].map((el, index) => {
          if (index == 0) {
            return {
              label: "首付款",
              value: Math.ceil(state1.payment),
              time: dayjs(Date.now()).format("YYYY-MM-DD"),
            };
          }
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }
    }

    // 低息方案
    if (state.plan === 2) {
      // 月租模式
      if (state1.model === 1) {
        if (!state1.periods1) return alert("请选择首付期数");
        const coefficientsFind = coefficients.find(
          (el) => el.key === state1.periods && el.key1 === state1.periods1
        )?.value;
        const num = new Calculator().divide(state1.price, coefficientsFind).getResult();
        // const num1 = new Calculator().divide(200, state1.periods).getResult();
        // 最终公式：(售价 / 系数 ) + ( 200 / 租期 )
        // const rent = new Calculator().add(num, num1).getResult();
        const rent = num;

        // 首付
        // const payment = new Calculator().multiply(rent * 1, state1.periods1).getResult();

        const list = [...Array(state1.periods).keys()].map((el, index) => {
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }

      // 首付模式
      if (state1.model === 2) {
        if (!state1.payment) return alert("请输入首付金额");
        // 计算租金
        const num = new Calculator().subtract(state1.price, state1.payment).getResult();
        const num1 = new Calculator()
          .add(1.12, new Calculator().multiply(state1.periods, 0.04).getResult())
          .getResult();
        const num2 = new Calculator().subtract(state1.periods, 1).getResult();
        // 最终公式：(零售价 - 首付) * (1.12 + 租期 * 0.04) / (租期 - 1)
        const rent = new Calculator().multiply(num, num1).divide(num2).getResult();
        // 最终公式：((售价-首付)* 1 * 4% + 4%) + 200 ) / (租期 - 1)
        // const rent = new Calculator().multiply(num, num1).add(200).divide(num2).getResult();
        const list = [...Array(state1.periods).keys()].map((el, index) => {
          if (index == 0) {
            return {
              label: "首付款",
              value: Math.ceil(state1.payment),
              time: dayjs(Date.now()).format("YYYY-MM-DD"),
            };
          }
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }
    }

    // 标准方案
    if (state.plan === 3) {
      // 月租模式
      if (state1.model === 1) {
        if (!state1.periods1) return alert("请选择首付期数");
        const coefficientsFind = coefficients3.find(
          (el) => el.key === state1.periods && el.key1 === state1.periods1
        )?.value;
        const num = new Calculator().divide(state1.price, coefficientsFind).getResult();
        // const num1 = new Calculator().divide(200, state1.periods).getResult();
        // 最终公式：(售价 / 系数 ) + ( 200 / 租期 )
        // const rent = new Calculator().add(num, num1).getResult();
        const rent = num;

        // 首付
        // const payment = new Calculator().multiply(rent * 1, state1.periods1).getResult();

        const list = [...Array(state1.periods).keys()].map((el, index) => {
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }

      // 首付模式
      if (state1.model === 2) {
        if (!state1.payment) return alert("请输入首付金额");
        // 计算租金
        const num = new Calculator().subtract(state1.price, state1.payment).getResult(); // 售价 - 首付
        const num1 = new Calculator().multiply(0.04, state1.periods).getResult(); // 0.04 * 期数
        const num2 = new Calculator().add(1.2).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
        const num3 = new Calculator().subtract(state1.periods, 1).getResult(); // 期数 - 1
        const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        console.log(rent);
        const list = [...Array(state1.periods).keys()].map((el, index) => {
          if (index == 0) {
            return {
              label: "首付款",
              value: Math.ceil(state1.payment),
              time: dayjs(Date.now()).format("YYYY-MM-DD"),
            };
          }
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }
    }
  } else {
    const arr = [state.plan, state.model, state.price, state.periods];
    if (!arr.every((el) => el !== undefined)) {
      return;
    }

    // 超惠方案
    if (state.plan === 1) {
      // 月租模式
      if (state1.model === 1) {
        if (!state1.periods1) return;
        const coefficientsFind = coefficients1.find(
          (el) => el.key === state1.periods && el.key1 === state1.periods1
        )?.value;

        if (!coefficientsFind) return;

        // 最终公式：售价 / 系数
        const num = new Calculator().divide(state1.price, coefficientsFind).getResult();

        const rent = num;

        // 首付
        // const payment = new Calculator().multiply(rent * 1, state1.periods1).getResult();

        const list = [...Array(state1.periods).keys()].map((el, index) => {
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }

      // 首付模式
      if (state1.model === 2) {
        if (!state1.payment) return;
        // 计算租金new
        const num = new Calculator().subtract(state1.price, state1.payment).getResult(); // 售价 - 首付
        const num1 = new Calculator().multiply(0.04, state1.periods).getResult(); // 0.04 * 期数
        const num2 = new Calculator().add(1.08).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
        const num3 = new Calculator().subtract(state1.periods, 1).getResult(); // 期数 - 1
        const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        console.log(rent);
        const list = [...Array(state1.periods).keys()].map((el, index) => {
          if (index == 0) {
            return {
              label: "首付款",
              value: Math.ceil(state1.payment),
              time: dayjs(Date.now()).format("YYYY-MM-DD"),
            };
          }
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }
    }

    // 低息方案
    if (state.plan === 2) {
      // 月租模式
      if (state1.model === 1) {
        if (!state1.periods1) return;
        const coefficientsFind = coefficients.find(
          (el) => el.key === state1.periods && el.key1 === state1.periods1
        )?.value;
        if (!coefficientsFind) return;
        const num = new Calculator().divide(state1.price, coefficientsFind).getResult();
        // const num1 = new Calculator().divide(200, state1.periods).getResult();
        // 最终公式：(售价 / 系数 ) + ( 200 / 租期 )
        // const rent = new Calculator().add(num, num1).getResult();
        const rent = num;

        // 首付
        // const payment = new Calculator().multiply(rent * 1, state1.periods1).getResult();

        const list = [...Array(state1.periods).keys()].map((el, index) => {
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }

      // 首付模式
      if (state1.model === 2) {
        if (!state1.payment) return;
        // 计算租金
        const num = new Calculator().subtract(state1.price, state1.payment).getResult();
        const num1 = new Calculator()
          .add(1.12, new Calculator().multiply(state1.periods, 0.04).getResult())
          .getResult();
        const num2 = new Calculator().subtract(state1.periods, 1).getResult();
        // 最终公式：(零售价 - 首付) * (1.12 + 租期 * 0.04) / (租期 - 1)
        const rent = new Calculator().multiply(num, num1).divide(num2).getResult();
        // 最终公式：((售价-首付)* 1 * 4% + 4%) + 200 ) / (租期 - 1)
        // const rent = new Calculator().multiply(num, num1).add(200).divide(num2).getResult();
        const list = [...Array(state1.periods).keys()].map((el, index) => {
          if (index == 0) {
            return {
              label: "首付款",
              value: Math.ceil(state1.payment),
              time: dayjs(Date.now()).format("YYYY-MM-DD"),
            };
          }
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }
    }

    // 标准方案
    if (state.plan === 3) {
      // 月租模式
      if (state1.model === 1) {
        if (!state1.periods1) return;
        const coefficientsFind = coefficients3.find(
          (el) => el.key === state1.periods && el.key1 === state1.periods1
        )?.value;

        if (!coefficientsFind) return;

        const num = new Calculator().divide(state1.price, coefficientsFind).getResult();
        // const num1 = new Calculator().divide(200, state1.periods).getResult();
        // 最终公式：(售价 / 系数 ) + ( 200 / 租期 )
        // const rent = new Calculator().add(num, num1).getResult();
        const rent = num;

        // 首付
        // const payment = new Calculator().multiply(rent * 1, state1.periods1).getResult();

        const list = [...Array(state1.periods).keys()].map((el, index) => {
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }

      // 首付模式
      if (state1.model === 2) {
        if (!state1.payment) return;
        // 计算租金
        const num = new Calculator().subtract(state1.price, state1.payment).getResult(); // 售价 - 首付
        const num1 = new Calculator().multiply(0.04, state1.periods).getResult(); // 0.04 * 期数
        const num2 = new Calculator().add(1.2).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
        const num3 = new Calculator().subtract(state1.periods, 1).getResult(); // 期数 - 1
        const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
        console.log(rent);
        const list = [...Array(state1.periods).keys()].map((el, index) => {
          if (index == 0) {
            return {
              label: "首付款",
              value: Math.ceil(state1.payment),
              time: dayjs(Date.now()).format("YYYY-MM-DD"),
            };
          }
          return {
            label: "第" + (index + 1) + "期",
            value: (rent * 1).toFixed(0),
            time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
          };
        });
        state.list = list;
      }
    }
  }
};

// 计算租金
const rent = () => { };
</script>

<template>
  <div class="container">
    <div class="logo">
      <img src="../assets/icon.svg" alt="" />
      <!-- <span class="title">租租机</span> -->
      <b class="title_sub" @click="() => console.log(state)">租金计算器</b>
    </div>

    <div class="form">
      <div class="for_title">输入设备价格,租期,押金比例!</div>

      <div class="select">
        <select class="inp inp_1" v-model="plan">
          <option class="inp_2" :value="0" disabled selected>请选择租赁模式</option>
          <option v-for="item in typeOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </option>
        </select>
      </div>

      <input class="inp number" type="number" placeholder="请输入设备零售价" v-model="price" />

      <div class="select">
        <select class="inp inp_1" v-model="model" @change="
          () => {
            state.periods = 0;
          }
        ">
          <option class="inp_2" :value="0" disabled selected>请输入租赁方式</option>
          <option v-for="item in options" :key="item.value" :value="item.value">
            {{ item.label }}
          </option>
        </select>
      </div>
      <div class="select">
        <select class="inp inp_1" v-model="periods" @change="
          () => {
            state.periods1 = 0;
          }
        ">
          <option class="inp_2" :value="0" disabled selected>选择分期期数</option>
          <template v-if="state.model === 1">
            <option v-for="item in periodsList" :key="item.value" :value="item.value">
              {{ item.label }}
            </option>
          </template>
          <template v-if="state.model === 2">
            <option v-for="item in periodsList1" :key="'else-' + item.value" :value="item.value">
              {{ item.label }}
            </option>
          </template>
        </select>
      </div>

      <div class="select" v-if="state.model === 1">
        <select class="inp inp_1" v-model="periods1">
          <option class="inp_2" :value="0" disabled selected>选择首交期数</option>
          <option v-for="item in periodsList2" :key="'else-' + item.value" :value="item.value">
            {{ item.label }}
          </option>
        </select>
      </div>
      <input v-if="state.model === 2" class="inp number" type="number" placeholder="请输入首付金额" v-model="payment" />
      <button class="inp btn" @click="rent1(false, true)">立即计算</button>
    </div>

    <div class="table">
      <div class="th">
        <div>期数</div>
        <div>付款日</div>
        <div>租金</div>
      </div>
      <div>
        <div class="th tr" v-for="(item, index) in state.list" :key="index">
          <div>{{ item.label }}</div>
          <div>{{ item.time }}</div>
          <div>{{ item.value + "元" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.table {
  margin-top: 15px;
  padding: 0 4vw;
  padding-bottom: 15px;
}

.th {
  display: flex;
  height: 40px;
  align-items: center;

  >div {
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 14px;
  }
}

.tr {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #ccc;

  >div {
    color: #999;
  }

  &:last-child {
    border: 0;
  }
}

.container {
  margin: 0;
  background: #f2f2f2;
  width: 100vw;
  height: max-content;
  min-height: 100vh;
}

.logo {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  color: #666;
}

.title_sub {
  margin-top: 10px;
  color: #444;
}

.form {
  padding: 0 4vw;
}

.for_title {
  color: #666;
  margin-top: 15px;
  font-size: 13px;
}

.inp {
  border: 0;
  outline: none;
  width: 100%;
  height: 40px;
  text-indent: 1em;
  background: #fff;
}

.inp_1 {
  color: #777;
  text-indent: 0.8em;
}

.number {
  margin-top: 15px;
}

.select {
  padding-right: 1vw;
  background: #fff;
  margin-top: 15px;
}

.inp_2 {
  display: none;
}

.btn {
  background: #429588;
  margin-top: 15px;
  color: #fff;
  font-size: 16px;
}
</style>
